<script setup>
import {
  Aim, ArrowDown, Coin,
  CreditCard, DataAnalysis, Grid,
  Magnet, Memo, OfficeBuilding,
  Paperclip, Postcard, Setting, SetUp, Tools,
  User, UserFilled, Wallet
} from "@element-plus/icons-vue";
import { ref, onMounted, nextTick, provide } from 'vue'
import { doGet } from '@/http/httpRequest'
import { confirmMessage, showMessage } from '@/util/message'
import { TOKEN_NAME } from '@/util/constant'
import { useRoute } from 'vue-router'

function handleOpen() {
  console.log("菜单展开了")
}

function handleClose() {
  console.log("菜单收起来了")
}

//右上角显示用户登录的信息  
let userInfo = ref({})

const getUserInfo = () => {
  //向后端发送请求，获取用户信息 
  doGet('/api/login/user').then(res => {
    if (res.data.code == 200) {
      //将用户信息赋值给userInfo
      userInfo.value = res.data.info
    } else {
      console.log("查询用户信息失败");

    }
  })
}

//挂载之后调用getUserInfo函数
//生命周期钩子函数 hook
onMounted(() => {
  getUserInfo()
  currentRoutePath()
})


//退出
const logout = () => {
  confirmMessage('确定要退出登录吗？').then(() => {
    doGet('/api/logout', {}).then(res => {
      if (res.data.code == 200) {
        //删除token
        localStorage.removeItem(TOKEN_NAME)
        //显示成功提示
        showMessage('退出登录成功', 'success')
        //调整到登录页面
        window.location.href = '/'
      }
    })
  }).catch(() => {
    //用户取消退出
    showMessage('已取消退出', 'info')
  })
}


//是否显示路由组件
let isRouterAlive = ref(true)

//提供局部刷新的函数
const reload = () => {
  isRouterAlive.value = false  //路由组件是隐藏的
  nextTick(() => {
    //vue执行渲染之后再执行这里的内容
    isRouterAlive.value = true
  })
}

//将上面函数放入前端容器中
provide('flush', reload) //@Service  @Component

//菜单默认激活
let routerPath = ref('')

//获取url中的路由路径
const currentRoutePath = () => {
  let tempPath = useRoute().path

  //根据/截取数组
  let tempArr = tempPath.split('/')
  if (tempArr.length > 3) {
    routerPath.value = "/" + tempArr[1] + "/" + tempArr[2]
  } else {
    routerPath.value = tempPath
  }


}
</script>

<template>
  <el-container>
    <!--左侧-->
    <el-aside width="200px">
      <div class="asideTitile">动力云客系统</div>
      <!--
        active-text-color: 活动菜单项的文本颜色
        background-color: 菜单的背景颜色
        default-active: 页面加载时默认激活菜单的index
        text-color: 菜单的文字颜色
        unique-opened: 是否只保持一个子菜单的展开，默认是false
        @open: sub-menu展开的回调
        @closeL sub-menu收起的回调
      -->
      <el-menu active-text-color="#ffd04b" background-color="#545c64" :default-active="routerPath" text-color="#fff"
        unique-opened style="border-right: 0 solid" v-on:open="handleOpen()" v-on:close="handleClose" :router="true">

        <!--1、市场活动菜单-->
        <!--
          index: 唯一标志
        -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <OfficeBuilding />
            </el-icon>
            <span>市场活动</span>
          </template>
          <!--
            index: 唯一标志
          -->
          <el-menu-item index="/dashboard/activity"><el-icon>
              <Aim />
            </el-icon>市场活动</el-menu-item>
          <el-menu-item index="1-2"><el-icon>
              <CreditCard />
            </el-icon>市场统计</el-menu-item>
        </el-sub-menu>

        <!--2、线索管理菜单-->
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Magnet />
            </el-icon>
            <span>线索管理</span>
          </template>
          <el-menu-item index="/dashboard/clue"><el-icon>
              <Paperclip />
            </el-icon>线索管理</el-menu-item>
          <el-menu-item index="2-2"><el-icon>
              <CreditCard />
            </el-icon>线索统计</el-menu-item>
        </el-sub-menu>

        <!--3、客户管理菜单-->
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <User />
            </el-icon>
            <span>客户管理</span>
          </template>
          <el-menu-item index="/dashboard/customer"><el-icon>
              <UserFilled />
            </el-icon>客户管理</el-menu-item>
          <el-menu-item index="3-2"><el-icon>
              <CreditCard />
            </el-icon>客户统计</el-menu-item>
        </el-sub-menu>

        <!--4、交易管理菜单-->
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Wallet />
            </el-icon>
            <span>交易管理</span>
          </template>
          <el-menu-item index="/dashboard/tran"><el-icon>
              <Coin />
            </el-icon>交易管理</el-menu-item>
          <el-menu-item index="4-2"><el-icon>
              <CreditCard />
            </el-icon>交易统计</el-menu-item>
        </el-sub-menu>

        <!--5、产品管理菜单-->
        <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <Memo />
            </el-icon>
            <span>产品管理</span>
          </template>
          <el-menu-item index="5-1"><el-icon>
              <SetUp />
            </el-icon>产品管理</el-menu-item>
          <el-menu-item index="5-2"><el-icon>
              <CreditCard />
            </el-icon>产品统计</el-menu-item>
        </el-sub-menu>

        <!--6、字典管理菜单-->
        <el-sub-menu index="6">
          <template #title>
            <el-icon>
              <Grid />
            </el-icon>
            <span>字典管理</span>
          </template>
          <el-menu-item index="6-1"><el-icon>
              <Postcard />
            </el-icon>字典管理</el-menu-item>
          <el-menu-item index="6-2"><el-icon>
              <DataAnalysis />
            </el-icon>字典统计</el-menu-item>
        </el-sub-menu>

        <!--7、用户管理菜单-->
        <el-sub-menu index="7">
          <template #title>
            <el-icon>
              <User />
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/dashboard/user"><el-icon>
              <UserFilled />
            </el-icon>用户管理</el-menu-item>
          <el-menu-item index="7-2"><el-icon>
              <CreditCard />
            </el-icon>用户统计</el-menu-item>
        </el-sub-menu>

        <!--8、系统管理菜单-->
        <el-sub-menu index="8">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="8-1"><el-icon>
              <Tools />
            </el-icon>系统管理</el-menu-item>
          <el-menu-item index="8-2"><el-icon>
              <CreditCard />
            </el-icon>系统统计</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!--右侧-->
    <el-container>
      <!--右侧顶部-->
      <el-header>
        <el-dropdown trigger="hover" placement="bottom-end">
          <div class="user-info">
            <el-icon style="margin-right: 8px;">
              <User />
            </el-icon>
            <span>{{ userInfo.name || '未登录用户' }}</span>
            <el-icon style="margin-left: 4px;">
              <ArrowDown />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">

                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!--右侧内容体-->
      <el-main>
        <router-view v-if="isRouterAlive" />
      </el-main>
      <!--右侧底部-->
      <el-footer>
        @版权所有 动力节点 2009-2099 北京市通州区景盛南二街纳特大厦7层711
      </el-footer>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-aside {
  background: #1a1a1a;
  height: calc(100vh);
}

.el-header {
  background: azure;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  color: #303133;
  font-size: 14px;
}

.el-footer {
  background: aliceblue;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.asideTitile {
  color: #f8f8f8;
  text-align: center;
  height: 35px;
  line-height: 35px;
}
</style>